<template>
    <view class="tip-popup">
        <u-popup :show="show" mode="center" :round="20" v-bind="$attrs">
            
            <view v-if="data.type==='normal'" class="normal-box">
                <img src="https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/tip.png" class="pic">
                
                <view class="msg">{{ $ftext(data.message) }}</view>
                <view class="btn" @click="close">按钮</view>
            </view>
           
            <view v-if="data.type!=='normal'" class="success-box">
                <view class="icon-bg">
                    <img :src="data.type==='success'?'https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/success.png':'https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/error.png'" class="pic">
                </view>
                
                <view class="msg mt26">{{ $ftext(data.message) }}</view>
                <view class="btn-text" @click="close">关闭</view>
            </view>
        </u-popup>
    </view> 
</template>

<script setup lang="ts">
/**
 * @author:  wyr
 * @description 【H5组件】操作“成功、失败、以及特殊情况说明”弹窗组件
 * @param { object} data - 对象{ type: 'success', message: "操作成功"}  // type 值 success error normal(特殊弹窗)
 * @param { Boolean} show - 双向绑定的数据，控制弹窗开关
 * @desc - 使用方式 <view @click="handleTest">测试tippopup</view>   
 * <toast :data="tipobj" v-model:show="showFlag"></toast>  // 使用组件
 * const handleTest = ()=>{  // 打开组件
    showFlag.value = true;
    tipobj={
        type: 'success',
        message: "操作成功",
    }
 }
 */

 import { watch,ref } from 'vue';
 const props = defineProps({
    data:{ type:Object, default:()=>{}}, 
    showFlag:{ type:Boolean, default:false},  // 双向绑定的数据,控制弹窗打开关闭
})

const show = ref<boolean>(false); 
const emit = defineEmits(['update'])

const close = ()=>{
    show.value = false;
    emit('update',show.value);
}


watch(()=>props.showFlag , (newVal,oldVal)=>{
    if(newVal){       
        show.value = true;
    }
})


</script>
<style lang="scss">
.tip-popup{
    .normal-box{
        width: 540rpx;
        // height: 440rpx;
        background: $uni-text-color-inverse;
        border-radius: 24rpx;
        position: relative;
        text-align: center;
        .pic{
            width: 65%;
            position: absolute;
            top: -46rpx;
            left: 94rpx;
        }

        .btn{
            width: 200rpx;
            height: 72rpx;
            line-height: 72rpx;
            border: 1px solid $uni-color-primary;
            border-radius: 16rpx;
            color: $uni-color-primary;
            margin: 44rpx auto;
        }
    }
    .msg{
        font-size: $uni-font-size-lg;
        font-weight: 500;
        color: #2E2F2E;
        line-height: 40rpx;
        margin-top: 220rpx;
        font-family: PingFangSC-Medium, PingFang SC;
    }
    .mt26{
        margin-top: 26rpx;
        font-size: 34rpx;
    }
    .success-box{
        width: 600rpx;
        // height: 500rpx;
        background: $uni-text-color-inverse;
        text-align: center;
        border-radius: 24rpx;
        .icon-bg{
            width: 110rpx;
            height: 110rpx;
            background: #0047CC;
            border-radius: 50%;
            margin:120rpx auto 26rpx ;
            .pic{
                width: 110rpx;
                height: 110rpx;
            }
        }
        .btn-text{
            font-size: 34rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;

            line-height: 55px;
            margin-top: 100rpx;
            height: 110rpx;
            border-top: 2rpx solid #eee;
        }
    }
    ::v-deep .u-safe-bottom .u-safe-area-inset-bottom{
        display: none;
    }
}
</style>
